<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>John Smith's Blog</title>
		<link rel="stylesheet" href="./css/style.css" type="text/css" />
		<link rel="stylesheet" href="./css/styles.css" type="text/css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet">
	<body>
		<header class="flex-container">
			<nav >
				<span><a id="home" href="#info">Home</a></span>
				<span><a href="allblog.html">All blogs</a></span>
				<span><input type="search" id="site-search" name="search" aria-label="Search thorugh site">
					<button>Search</button></span>
				<span><a href="login.html">Login</a></span>
				<span><a href="register.html">Register</a></span>
			</nav>
		</header>
		
		<img id="infoback" src="https://pmcvariety.files.wordpress.com/2014/02/cosmos-fox-simulcast.jpg?w=1000&h=563&crop=1"></img>
		<div class="flex-container" id="info">
			<a href="https://www.google.com"><img class="shakeshake" src="./image/1.jpg"></a>
			<h3>John Smith's Blog</h3>
			<div class="shakeshake nobutton">
				<a href="about.html">About Author</a>
			</div>
		</div>
		<div class="flex-container" id="main">
			<div id="popular">
				<h2>Most Popular</h2>
				<a href="blog.html"><button class="bubble-l centerS">Blog one</button></a>
				<a href="blog.html"><button class="bubble-l centerS">Blog two</button></a>
				<a href="blog.html"><button id="disp" class="bubble-l">Blog three</button></a>
			</div>
		
			<div class="content flex-container">
				<div class="blog">
					<div class="col3 col">
						<img src="./image/1.jpg" alt="" />
						<img src="./image/2.jpg" alt="" />
					</div>
					<span class="text col8 right-col last-col">
						<div class="jump"><a href="blog.html"><h3 >Blog one</h3></a></div>
						<h4>Blog sub-title</h4>
						<h5 class="pt">Publish time</h5>
						<p>Lorem ipsudd asdl;kfj ;lsdkjf ;sldkjfoasdij f;lskdjf poawie j
						f;sldk gha;eorigh a;osfdhga ;dslkgh asd;lgkah s
						sd fasdsd ah ta efha rjkg  zsxky hlfyhjzghf azsxtdulkhs j
						m dolor sit amet, consectetur adipissdfcing elit
						The world is the planet Earth and all life on it, including human civilization.[1] In a philosophical context, the "world" is the whole of the physical Universe, or an ontological world (the "world" of an individual). In a theological context, the world is the material or the profane sphere, as opposed to the celestial, spiritual, transcendent or sacred spheres. "End of the world" scenarios refer to the end of human history, often in religious contexts.

The history of the world is commonly understood as spanning the major geopolitical developments of about five millennia, from the first civilizations to the present. In terms such as world religion, world language, world government, and world war, the term world suggests an international or intercontinental scope without necessarily implying participation of every part of the world.
					</span>
				</div>
				<div class="blog">
					<div class="col3 col">
						<img src="./image/1.jpg" alt="" />
						<img src="./image/2.jpg" alt="" />
					</div>
					<span class="text col8 right-col last-col">
						<a class="jump" href="blog.html"><h3 >Blog two</h3></a>
						<h5>Blog sub-title</h5>
						<h5 class="pt">Publish time</h5>
						<p>Lorem ipsudd asdl;kfj ;lsdkjf ;sldkjfoasdij f;lskdjf poawie j
						f;sldk gha;eorigh a;osfdhga ;dslkgh asd;lgkah s
						sd fasdsd ah ta efha rjkg  zsxky hlfyhjzghf azsxtdulkhs j
						m dolor sit amet, consectetur adipissdfcing elit</p>
					</span>
				</div>
				<div class="blog">
					<div class="col3 col">
						<img src="./image/1.jpg" alt="" />
						<img src="./image/2.jpg" alt="" />
					</div>
					<span class="text col8 right-col last-col">
						<a class="jump" href="blog.html"><h3>Blog three</h3></a>
						<h4>Blog sub-title</h4>
						<h5 class="pt">Publish time</h5>
						<p>Lorem ipsudd asdl;kfj ;lsdkjf ;sldkjfoasdij f;lskdjf poawie j
						f;sldk gha;eorigh a;osfdhga ;dslkgh asd;lgkah s
						sd fasdsd ah ta efha rjkg  zsxky hlfyhjzghf azsxtdulkhs j
						m dolor sit amet, consectetur adipissdfcing elit</p>
					</span>
				</div>
				
			</div>
		</div>
		
		<footer>
			<div class="col3 col" id="ql">
				<h4>Quick Links</h4>
				<div id="qlink">
					<span><a href="https://www.google.com">My another blog</a></span>
					<span><a href="https://www.baidu.com">My research</a></span>
					<span><a href="https://www.apple.com">My shops</a></span>
					<span><a href="about.html">My Personal page</a></span>
				</div>
			</div>
			<div class="col3 right-col" id="pl">
				<h4>Produced by</h4>
				<p>Company: I DONT CARE ££</p>
			</div>
		
		</footer>
	</body>
</html>